<template>
	<view class="cu-modal" :class="visible ? 'show' : ''">
		<view class="cu-dialog" style="overflow: visible;">
			<view class="cu-bar justify-end">
				<view class="content">选择接收人</view>
				<view class="action" @click="hideModal"><text class="cuIcon-close text-red"></text></view>
			</view>
			<view v-if="selectorModel == 1" class="padding-lg">
				<bjx-inputs
					:value="generValue"
					placeholder="输入接收人,查张三,您可输入: zs或zhangs或zhangsan"
					itemKey="Name"
					@list="getGenerList"
					@select="searchSelect"
					@close="searchSelectClose"
				></bjx-inputs>
			</view>
			<view v-if="selectorModel == 2" class="padding-top-lg padding-bottom-lg">
				<checkbox-group class="block" @change="checkBoxChange">
					<label v-for="(item, index) in empOptions" :key="index">
						<checkbox :class="empValue.indexOf(item.NO) > -1 ? 'checked' : ''" :checked="empValue.indexOf(item.NO) > -1 ? true : false" :value="item.NO"></checkbox>
						<text class="padding-left-sm">{{ item.NAME }}</text>
					</label>
				</checkbox-group>
			</view>

			<view v-if="selectorModel == 1">
				<view class="cu-list menu">
					<view class="cu-item" v-for="item in selectedAccepter" :key="item">
						<view class="content">
							<text class="text-grey">{{ item.EmpName }}/{{ item.DeptName }}</text>
						</view>
						<view class="action"><text class="text-grey text-sm" @click="delAccepterClick(item)">移除</text></view>
					</view>
				</view>
			</view>

			<view class="cu-bar">
				<view class="action margin-0 flex-sub  solid-left" @click="hideModal">取消</view>
				<view class="action margin-0 flex-sub text-blue solid-left" @click="okClick">执行发送</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapActions } from 'vuex';
import BjxInputs from '@/components/bjx-inputs/bjx-inputs.vue';
export default {
	components: {
		BjxInputs
	},
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		flow: {
			type: Object,
			default: () => {
				return {};
			}
		},
		toNode: {
			type: String,
			default: ''
		}
	},
	watch: {
		visible: {
			deep: true,
			immediate: true,
			handler(val, oldVal) {
				if (val) {
					this.initData();
				}
			}
		}
	},
	data() {
		return {
			generValue: '',
			selectorModel: 0,
			empValue: [],
			empOptions: [],
			selectedAccepter: [],
			selectorModel: 0,
			generList: []
		};
	},
	methods: {
		...mapActions({
			accepterInit: 'flow/accepterInit',
			accepterOfGenerInit: 'flow/accepterOfGenerInit',
			getAccepter: 'flow/getAccepter',
			accepterAddEmps: 'flow/accepterAddEmps',
			accepterOfGenerDel: 'flow/accepterOfGenerDel',
			selectEmpsInit: 'flow/selectEmpsInit'
		}),
		initData() {
			this.accepterInit({
				...this.flow,
				ToNode: this.toNode
			})
				.then(res => {
					let modelCache = 0;
					if (res && res.Selector && res.Selector[0]) {
						let selectorModel = res.Selector[0].SelectorModel;
						switch (selectorModel) {
							case 0: {
							}
							case 1: {
							}
							case 2: {
							}
							case 3: {
							}
							case 6: {
							}
							case 4: {
								modelCache = 2;
								break;
							}
							case 5: {
								modelCache = 1;
								break;
							}
						}
					}
					this.selectorModel = modelCache;
					if (res && res.Emps) {
						this.empOptions = res.Emps;
					}
					if (modelCache == 1) {
						return this.accepterOfGenerInit({
							...this.flow,
							ToNode: this.toNode
						});
					} else {
						this.needInit = false;
						return null;
					}
				})
				.then(res => {
					if (res) {
						this.selectedAccepter = res;
						this.needInit = false;
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		checkBoxChange(e) {
			console.log(e);
			this.empValue = e.detail.value;
		},
		hideModal() {
			this.$emit('close-modal')
		},
		okClick() {
			if (this.selectorModel == 1) {
				this.$emit('send-click', {});
			} else {
				this.$emit('send-click', {
					selectEmps: this.empValue
				});
			}
		},
		searchSelect(e) {
			console.log(e);
			let no = e.No;
			this.accepterAddEmps({
				...this.flow,
				AddEmps: no
			})
				.then(res => {
					this.selectedAccepter = res;
				})
				.catch(err => {
					console.log(err);
				});
		},
		getGenerList(obj) {
			console.log('list', obj);
			if (obj.value) {
				this.getAccepter({
					TB_Emps: obj.value,
					...this.flow
				})
					.then(res => {
						this.generList = res;
						obj.callback(res);
					})
					.catch(err => {
						console.log(err);
					});
			} else {
				obj.callback([]);
			}
		},
		searchSelectClose(e) {},
		delAccepterClick(e) {
			this.accepterOfGenerDel({
				...this.flow,
				FK_Emp: e.FK_Emp
			})
				.then(res => {
					this.selectedAccepter = res;
				})
				.catch(err => {
					console.log(err);
				});
		}
	}
};
</script>

<style></style>
